<template>
    <div class="wrapper">
        <header>
            <!-- 跳转设置 -->
            <li @click="goToAppointmentsuccess">
                <img class="icon" :src="'src/img/left.png'" alt="返回图标">
            </li>

            <i class="fa fa-angle-left" @click="goBack"></i>
            <p>我的预约</p>
            <div></div>
        </header>

        <!-- 订单状态导航 -->
        <nav class="order-nav">
            <ul class="horizontal-nav">
                <li :class="{ 'active': activeFilter === null }" class="left" @click="filterOrdersByState(null)">全部</li>
                <li :class="{ 'active': activeFilter === 1 }" class="center" @click="filterOrdersByState(1)">已预约</li>
                <li :class="{ 'active': activeFilter === 2 }" class="right" @click="filterOrdersByState(2)">已完成</li>
                <li :class="{ 'active': activeFilter === 3 }" class="right" @click="filterOrdersByState(3)">已取消</li>
                <!-- <li :class="{ 'active': activeFilter === 5 }" class="right" @click="filterOrdersByState(3)">未支付</li> -->

            </ul>
        </nav>

        <!-- 根据选定状态显示的订单列表 -->
        <ul v-if="filteredOrders.length > 0">
            <li v-for="order in filteredOrders" :key="order.orderId">
                <div class="left">
                    <p>{{ formatOrderDate(order.orderDate) }}</p>
                    <p>{{ order.name }}</p> <!-- Display order name below the date -->
                </div>
                <div class="right">
                    <p @click="cancelOrder(order.orderId)" v-if="order.state === 1">点击取消预约</p>
                    <p :state="order.state">{{ getOrderTypeText(order.state) }}</p>
                </div>
            </li>
        </ul>
        <p v-else>没有可用订单。</p>

        <Footer></Footer>
    </div>
</template>

<script>
import axios from 'axios'; // 引入 axios 库，用于发送 HTTP 请求
import Footer from '@/components/Footer.vue'; // 引入名为 'Footer.vue' 的组件
import { getSessionStorage } from '../common.js'; // 引入 getSessionStorage 方法，用于从 sessionStorage 中获取数据

export default {
    components: {
        Footer, // 注册 Footer 组件
    },
    data() {
        return {
            orders: [], // 存储从后端获取的订单数据
            filteredOrders: [], // 存储根据状态过滤后的订单数据
            activeFilter: null, // 当前选中的订单状态过滤器，默认为 null 表示“全部订单”
        };
    },
    created() {
        // 组件创建时执行的钩子函数，用于初始化数据
        this.fetchOrders(); // 调用方法从后端获取订单数据
    },
    methods: {
        async fetchOrders() {
            try {
                const user = getSessionStorage('user'); // 从 sessionStorage 中获取用户信息对象
                const userId = user.userId; // 从用户信息对象中获取 userId

                if (!userId) {
                    console.error('未在 sessionStorage 中找到用户ID');
                    return; // 如果未找到 userId，则退出函数
                }

                // 发送 GET 请求获取用户订单数据
                const response = await axios.get(`http://localhost:8080/confirmorder/list?userId=${userId}`);
                const { code, orders } = response.data; // 从响应数据中解构出返回的状态码和订单数据

                if (code === 200) {
                    this.orders = orders; // 将获取到的订单数据存储到组件的 orders 属性中
                    this.filteredOrders = orders; // 初始时显示所有订单
                } else {
                    console.error('获取订单失败，服务器响应码为:', code);
                }
            } catch (error) {
                console.error('获取订单时出错:', error);
            }
        },
        formatOrderDate(date) {
            // 格式化订单日期的方法（根据实际需求进行具体实现）
            return date; // 此处为占位符，实际应替换为日期格式化逻辑
        },
        getOrderTypeText(state) {
            // 根据订单状态返回对应的文本描述
            switch (state) {
                case 1:
                    return '未归档';
                case 2:
                    return '已完成';
                case 3:
                    return '已取消';
                case 4:
                    return '超时';
                case 5:
                    return '未完成';
                default:
                    return '未知状态';
            }
        },
        filterOrdersByState(state) {
            // 根据订单状态进行过滤显示
            this.activeFilter = state; // 设置当前活动的订单状态过滤器

            if (state === null) {
                this.filteredOrders = this.orders; // 如果状态为 null，显示所有订单
            } else {
                // 否则，根据状态进行过滤，更新 filtere dOrders 数组
                this.filteredOrders = this.orders.filter(order => order.state === state);
            }
        },
        async cancelOrder(orderId) {
            try {
                const order = this.orders.find(order => order.orderId === orderId);
                if (!order) {
                    console.error('订单未找到');
                    return;
                }

                // Calculate time difference in hours between current time and order time
                const orderDate = new Date(order.orderDate);
                const currentDate = new Date();
                const timeDiffInHours = (orderDate - currentDate) / (1000 * 60 * 60);

                if (timeDiffInHours < 24 && timeDiffInHours > 0) {
                    // Less than 24 hours to order date, show warning
                    if (!confirm('离预约日期不足一天，禁止取消！')) {
                        return; // User canceled action
                    }
                } else if (timeDiffInHours <= 0) {
                    // Order date has passed, show message
                    if (!confirm('已逾期，请重新预约！')) {
                        return; // User canceled action
                    }
                } else {
                    // Proceed with cancellation
                    const response = await axios.get(`http://localhost:8080/confirmorder/cancel?orderId=${orderId}`);

                    if (response.data.code === 200) {
                        alert('取消成功');
                        this.fetchOrders(); // Refresh orders after successful cancellation
                    } else {
                        alert('取消失败');
                    }
                }


            } catch (error) {
                console.error('取消订单时出错:', error);
                alert('取消失败');
            }
        }
        ,
        goBack() {
            // 返回上一页的方法
            history.go(-1); // 使用浏览器历史记录返回上一页
        },
        goToAppointmentsuccess() {
            // 跳转到预约成功页面的方法
            this.$router.push('/appointmentsuccess'); // 使用 Vue Router 跳转到指定路径 '/appointmentsuccess'
        }
    },
};
</script>



<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

ul li .left p:last-child {
    font-weight: 600;
}

/*********************** 状态显示 ***********************/


ul li .right {
    font-size: 4vw;
    color: #E6A23C;
}

ul li .right p:last-child {
    color: #333;
    font-size: 4.2vw;
    font-weight: 600;
}

ul li .right p:last-child[state="1"] {
    color: #E6A23C;
    /* 已预约状态 */
}

ul li .right p:last-child[state="2"] {
    color: #67C23A;
    /* 已完成状态 */
}

ul li .right p:last-child[state="3"] {
    color: #F56C6C;
    /* 已取消状态 */
}

ul li .right p:last-child[state="4"] {
    color: #909399;
    /* 超时状态 */
}

/*********************** header ***********************/

header li {
    list-style-type: none;
}

.icon {
    float: left;

    width: 80%;
    height: 8.2vw;
}

.order-nav {
    margin-top: 16vw;
    /* 根据需要调整，创建与头部之间的空间 */
}

.horizontal-nav li.active {
    background-color: #E6A23C;
    /* 橙色背景 */
}

.horizontal-nav {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    /* Adjust to space-around or other as needed */
    border-bottom: 1px solid #ccc;
    /* Optional: Add bottom border */
}

/* 这个使原本的样式，不省略就会导致橙色背景无法覆盖
.horizontal-nav li {
    cursor: pointer;
    padding: 10px 15px;
    text-align: center;
}

.horizontal-nav .left {
    text-align: left;
}

.horizontal-nav .right {
    text-align: right;
}

.horizontal-nav li:hover {
    background-color: #f0f0f0;
} */

header {
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}

header .fa {
    font-size: 8vw;
}

header li {
    list-style-type: none;
}

.icon {
    float: left;

    width: 80%;
    height: 8.2vw;
}

/*********************** footer ***********************/
footer {
    width: 100%;
    height: 14.2vw;
    box-sizing: border-box;
    border-top: solid 1px #E9E9E9;
    background-color: #FFF;

    position: fixed;
    left: 0;
    bottom: 0;
}

footer ul {
    width: 100%;
    height: 14.2vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

footer ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-size: 3vw;
    color: #999;

    user-select: none;
    cursor: pointer;
}

footer ul li .fa {
    font-size: 5vw;
}

/*********************** common样式 ***********************/
.top-ban {
    width: 100%;
    height: 15.7vw;
}

.bottom-ban {
    width: 100%;
    height: 14.2vw;
}

/*********************** ul ***********************/
ul {
    width: 86vw;
    margin: 0 auto;
}

ul li {
    width: 100%;
    height: 14vw;
    border-bottom: solid 1px #EEE;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul li .left {
    user-select: none;
    cursor: pointer;
}

ul li .left p:first-child {
    color: #555;
    font-size: 3.3vw;
}

ul li .left p:last-child {
    color: #333;
    font-size: 4.2vw;
    font-weight: 600;
}
</style>
